import G6 from '@antv/g6';
import StartNode from '@comp/FlowPreview/nodes/StartNode';
import EndNode from '@comp/FlowPreview/nodes/EndNode';
import UserTask from '@comp/FlowPreview/nodes/UserTask';
import GateWay from '@comp/FlowPreview/nodes/GateWay';
import EmptyNode from '@comp/FlowPreview/nodes/EmptyNode';
import FlowLine from '@comp/FlowPreview/nodes/FlowLine';

export default {
  createGraph(container, flow) {
    let that = this
    return {
      flow,
      container,
      graph: this.doCreateGraph(container),
      reRender() {
        that.reRender(this)
      }
    };
  },
  reRender({graph, container, flow}) {
    graph.data(this.resolveGraphProperties(flow)); // 设置图形数据
    graph.changeSize(container.offsetWidth, container.offsetHeight); // 更新图形大小以适应容器
    graph.render(); // 渲染图形
  },
  resolveGraphProperties(flowModel) {
    //解析流程模型属性
    flowModel = JSON.parse(JSON.stringify(flowModel));
    //遍历节点
    this.traverseNode(flowModel);
    //遍历边
    this.traverseSide(flowModel);

    return flowModel;
  },
  traverseNode(flowModel) {
    (flowModel.nodes || []).forEach(node => {
      //设置开始节点和结束节点类型
      if (node.id === 'start') {
        node.type = 'startNode';
      }
      if (node.id === 'end') {
        node.type = 'endNode';
      }
      //设置用户任务类型
      if (node.type === 'userTask') {
      }
      //设置网关类型
      if (node.type === 'gateway') {
        if (!this.isEmpty((flowModel.gatewayPairs || []).find(n => n.source === node.id))) {
          //网关开始
          node.gatewayType = 'start';
        } else {
          //网关结束
          node.gatewayType = 'end';
        }
      }
    });
  },
  traverseSide(flowModel) {
    (flowModel.edges || []).forEach(edge => {
      //设置流程线类型
      edge.type = 'flowLine';
      //设置网关开始
      if (!this.isEmpty((flowModel.gatewayPairs || []).find(n => n.source === edge.source))) {
        //网关开始
        edge.gatewayType = 'start';
      }

      if (!this.isEmpty((flowModel.gatewayPairs || []).find(gp => gp.source === edge.target || gp.target === edge.target))) {
        //下一个节点是网关
        edge.endGateWay = true;
      }

      //设置网关结束
      if (!this.isEmpty((flowModel.gatewayPairs || []).find(n => n.target === edge.target))) {
        //网关开始
        edge.gatewayType = 'end';
      }
    });
  },
  isEmpty(obj) {
    if (!obj || obj === '' || (Array.isArray(obj) && obj.length === 0)) return true;
    if (typeof obj === 'object' && Object.keys(obj).length === 0) return true;
    return false;
  },
  register() {
    G6.registerNode('startNode', StartNode); // 注册开始节点
    G6.registerNode('endNode', EndNode); // 注册结束节点
    G6.registerNode('userTask', UserTask); // 注册用户任务节点
    G6.registerNode('gateway', GateWay); // 注册网关节点
    G6.registerNode('empty', EmptyNode); // 注册流程线
    G6.registerEdge('flowLine', FlowLine); // 注册流程线
  },
  doCreateGraph(container) {
    this.register()
    return new G6.Graph({
      container: container, // 图表容器
      width: container.offsetWidth, // 容器宽度
      height: container.offsetHeight, // 容器高度
      renderer: 'svg', // 渲染方式为SVG
      minZoom: 0.5, // 最小缩放比例
      maxZoom: 2, // 最小缩放比例
      modes: {
        default: ['zoom-canvas', 'drag-canvas'] // 默认启用的交互模式：缩放画布和拖拽画布
      },
      layout: {
        type: 'dagre', // 布局方式为dagre
        rankdir: 'LR', // 布局方向为从左到右
        nodesep: 30, // 节点之间的垂直间距
        ranksep: 30, // 层之间的水平间距
        controlPoints: true, // 是否显示布局中的控制点
      },
    });
  }
};